var PromptForm = function () {
  var PromptFormContent = function () {
    var template = /* html */ `
      <div class="prompt-form-content">
        <el-form label-position="top" v-if="formItems.length>0" size="small">
          <el-form-item v-for="(formItem,index) in formItems" :key="'form-item_'+index" :label="formItem.label" :required="formItem.isRequired">
            <el-input v-if="formItem.type==='input'" class="prompt-form-input" v-model="inputData[formItem.field]" :maxlength="formItem.maxlength"
              :placeholder="formItem.placeholder"></el-input>
            <el-input v-else-if="formItem.type==='textarea'" class="prompt-form-input" v-model="inputData[formItem.field]" :maxlength="formItem.maxlength"
              type="textarea" :autosize="true" resize="none" :rows="1" :placeholder="formItem.placeholder"></el-input>
            <el-input-number is-decimal-zero v-else-if="formItem.type==='number'" class="prompt-form-input" v-model="inputData[formItem.field]"
              :precision="formItem.precision" :min="formItem.min" :max="formItem.max" :step="formItem.step" controls-position="right"></el-input-number>
          </el-form-item>
        </el-form>
        <div style="text-align:center">
          <el-button size="small" type="primary" @click="ensure">确定</el-button>
          <el-button size="small" type="danger" @click="cancel">取消</el-button>
        </div>
      </div>
    `;

    return {
      props: {
        option: {
          type: Object,
          required: true
        },
        data: {
          type: Object,
          required: true
        }
      },

      data: function () {
        var inputData = {};
        var formItems = this.option.formItems;
        var data = this.data;
        for (var i = 0; i < formItems.length; i++) {
          var formItem = formItems[i];
          var field = formItem.field;
          inputData[field] = data[field];
        }
        return {
          inputData: inputData,
          formItems: formItems
        };
      },

      methods: {
        ensure: function () {
          this.$emit('ensure', this.inputData);
        },

        cancel: function () {
          this.$emit('cancel');
        }
      },

      template: template
    };
  }();

  var template = /* html */ `
    <el-dialog append-to-body :title="title" :visible.sync="openFormDialog" custom-class="prompt-form" top="0" :width="width"
      @open="openForm" @opened="openedForm" @close="closeForm" @closed="closedForm">
      <prompt-form-content v-if="showForm" :option="option" :data="data" @cancel="handleCancel" @ensure="handleEnsure"></prompt-form-content>
    </el-dialog>
  `;

  return {
    props: {
      title: String,
      visible: {
        type: Boolean,
        required: true
      },
      width: String,
      option: {
        type: Object,
        required: true
      },
      data: {
        type: Object,
        required: true
      }
    },

    watch: {
      visible: function () {
        this.openFormDialog = this.visible;
      }
    },

    data: function () {
      return {
        openFormDialog: this.visible,
        showForm: false
      };
    },

    methods: {
      handleEnsure:function(inputData){
        this.$emit('ensure', inputData);
      },

      handleCancel:function(){
        this.openFormDialog = false;
      },

      openForm: function () {
        this.showForm = true;
        this.$emit('open');
      },

      openedForm: function () {
        this.$emit('opened');
      },

      closeForm: function () {
        this.$emit('update:visible', false);
        this.$emit('close');
      },

      closedForm: function () {
        this.showForm = false;
        this.$emit('closed');
      }
    },

    components: {
      PromptFormContent: PromptFormContent
    },

    template: template
  };
}();